<html>
  <head>
    <!--CSS file (default YUI Sam Skin) -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/menu/assets/skins/sam/menu.css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css" />
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css">

    <link rel="stylesheet" type="text/css" href="/static/stylesheets/datatable.css">
    <link rel="stylesheet" type="text/css" href="/static/stylesheets/main.css" />

    {{title}}
  </head>
  <body class="yui-skin-sam">
  {{header}}

  <b>Open Tasks:</b><br />
  <div id="task_section" class="grid">
      <table id="tasks">
          <thead>
              <tr>
                  <th>Project</th>
                  <th>Task</th>
              </tr>
          </thead>
          <tbody>
          {% for task in tasks %}
            <tr>
              <td>{{task.parent}}</td>
              <td>{{task.action}}</td>
            </tr>
          {% endfor %}
          </tbody>
      </table>
  </div>

  {{footer}}

  <!-- YUI COMMON -->
  <!-- Dependencies -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  <!-- END YUI COMMON -->

  <!-- YUI DATATABLE -->
  <!-- Dependencies -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min.js"></script>

  <!-- Source files -->
  <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-min.js"></script>
  <script>
  var taskTable;

  formatDescription = function(elCell, oRecord, oColumn, oData) {
    var pipe = oData.indexOf('|');
    var key = oData.substring(0, pipe);
    var desc = oData.substring(pipe+1);
    elCell.innerHTML = '<a href="/projectdetail?project=' + key + '">' + desc + '</a>';
  };

  YAHOO.util.Event.addListener(window, "load", function() {
      YAHOO.example.EnhanceFromMarkup = new function() {
          var myColumnDefs = [
              {key:"project", label:"Project", sortable:true, formatter:formatDescription},
              {key:"task", label:"Task", sortable:true}
          ];

          this.myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("tasks"));
          this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
          this.myDataSource.responseSchema = {
              fields: [
                      {key:"project"},
                      {key:"task"}
              ]
          };

          this.myDataTable = new YAHOO.widget.DataTable("task_section", myColumnDefs, this.myDataSource,
                  { sortedBy:{key:"project",dir:"asc"} }
          );
          taskTable = this.myDataTable;
      };
  });
  </script>
  <!-- END YUI DATATABLE -->
  </body>
</html>
